import { emptyStyle, getStyle } from '../utils/style'
import { makeSetter } from '../utils'
export default {
  '@init'({ style, data }) {
    style.height = 'auto'
    style.width = '100%'
    data.styleContent = emptyStyle
    data.style = {}
  },
  '@resize': {
    options: ['width', 'height']
  },
  ':root': ({ data, slot, env }: any, cate1, cate2, cate3) => {
    cate1.items = [
      {
        title: '多层级',
        description: '多层级',
        type: 'Array',
        options: {
          addText: '添加层级',
          getTitle: ({ title }) => {
            return env.i18n(title)
          },
          onAdd: (id) => {
            const newSlot = {
              id,
              zIndex: 0,
              title: `层级${(data?.layerList?.length ?? 0) + 1}`
            }
            slot.add(id, newSlot.title)
            return newSlot
          },
          items: [
            {
              title: '状态名称',
              type: 'text',
              description: '状态的名称，语义化区分不同状态',
              value: 'title'
            },
            {
              title: 'zIndex',
              type: 'InputNumber',
              options: [{ min: 0, max: 10000, width: 100 }],
              value: 'zIndex'
            }
          ]
        },
        value: {
          get({ data }: any) {
            return data.layerList
          },
          set({ data, slot }: any, options) {
            data.layerList = options
          }
        }
      }
    ]
    cate2.title = '高级'
    cate2.items = [
      {
        title: '淡入淡出',
        items: [
          {
            title: '启用',
            type: 'switch',
            value: makeSetter('enableFade')
          },
          {
            title: 'threshold',
            type: 'InputNumber',
            options: [{ min: 0, max: 1, width: 100 }],
            value: makeSetter('threshold')
          },
          {
            title: '淡入',
            type: '_event',
            options: {
              outputId: 'onFadeIn'
            },
            ifVisible({ data }: any) {
              return data.enableFade
            }
          },
          {
            title: '淡出',
            type: '_event',
            options: {
              outputId: 'onFadeOut'
            },
            ifVisible({ data }: any) {
              return data.enableFade
            }
          }
        ]
      }
    ]
    cate3.title = '样式'
    cate3.items = [
      {
        title: '',
        type: 'code',
        options: {
          language: 'css',
          enableFullscreen: false,
          title: '编辑校验规则',
          width: 600,
          minimap: {
            enabled: false
          },
          babel: true,
          eslint: {
            parserOptions: {
              ecmaVersion: '2020',
              sourceType: 'module'
            }
          }
        },
        value: makeSetter('styleContent', {
          convert(data, output, value) {
            let val = decodeURIComponent(value)
            let changed = false
            if (!val) {
              changed = true
              val = emptyStyle
            }
            if (!/^\s*:root\s*{/.test(val)) {
              changed = true
              val = emptyStyle
            }
            data.style = getStyle(val.trim() || '')
            if (changed) {
              return encodeURIComponent(val)
            }
            return value
          }
        })
      }
    ]
  }
}
